<template>
  <div>
    <div class="middle">
      <div class="title-name">
        <i class="el-icon-pie-chart" style="color: brown;"></i>
        <h4>现支持网站</h4>
      </div>
      <el-row class="logo-box">
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/aqi.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/qq.png"/>
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/hunantv.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/letv.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/youku.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/tudou.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/1905.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/baofeng.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/kankan.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/pptv.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/yinyuetail.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/wasu.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/fengxing.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/cntv.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/sinalogo.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/acfun.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/bilibili.png" />
          </div>
        </el-col>
        <el-col :span=4>
          <div class="col">
            <img src="../assets/logo/sohu.png" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'About'
}
</script>
<style lang="less">
  .middle{
    margin: 30px 80px 0 80px;
    .title-name{
      h4{
        display: inline-block;
        margin-left:10px;
      }
    }
    h4::after{
      content:'解析已支持26家视频网站，10家音乐网站，更多惊喜请自行探索。';
      color: grey;
      font-size: 10px;
      margin-left: 21px;
    }
    .logo-box{
      .col{
        margin: 10px 10px;
        text-align: center;
        padding: 10px 15px;
        border-radius: 3px;
        border: 1px solid #eee;
        cursor: pointer;
        img{
          max-width: 100%;
          display: block;
          max-height: 41px;
          margin: auto;
        }
      }
      .col:hover{
        border: 1px solid rgba(62,62,62,.6);
        box-shadow: 0 0 7px rgb(62,62,62), 0 0 7px rgba(255, 255, 255, 0.04);
        transition: all .3s linear;
      }
    }
  }
</style>
